<template>
  <view class="page">
    <Navbar title="登录" color="#313131" occupy>
      <u-icon slot="left" name="arrow-left" color="#313131" />
    </Navbar>
    <view class="info f f-col f-ac mt-50 mb-50">
      <view class="avatar">
        <u-avatar :src="baseUrl + userInfo.avatar" size="188rpx" />
      </view>
      <view>{{ encryption() }}</view>
    </view>
    <!-- <u-input
      v-model="userForm.password"
      placeholder="请输入登录密码"
      placeholder-style="color: #909090; font-size: 24rpx;"
      maxlength="20"
      type="password"
      color="#313131"
      font-size="28rpx"
      border="bottom"
      password
      clearable
    /> -->
    <view class="btn f f-ac f-jc" @click="handleSubmit"> 登录 </view>
    <!-- <view class="forget f f-ac f-je mt-10 mb-10">
      <text @click="handleForget">忘记登录密码？</text>
    </view> -->
  </view>
</template>
<script>
import config from "@/request/baseUrl.js";
import { postLogin } from "@/request/bindApi.js";
export default {
  data() {
    return {
      baseUrl: config.baseUrl,
      userInfo: {}, // 上次登录用户信息
      userForm: {
        username: "", // 账户
        // password: "", // 密码
        code: "", // 小程序code码
      },
    };
  },
  onLoad() {
    this.userInfo = this.$getStorage("USER_INFO");
    this.userForm.username = this.userInfo.userName;
  },
  methods: {
    // 忘记密码
    handleForget() {
      uni.navigateTo({ url: "/pages/bind/forgetReset" });
    },
    // 手机号加密
    encryption() {
      let userName = this.userInfo.userName;
      return userName
        ? userName.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")
        : "暂无手机号";
    },
    // 登录
    handleSubmit() {
      uni.login({
        success: (loginRes) => {
          this.userForm.code = loginRes.code;
          postLogin(this.userForm).then((res) => {
            if (res.code == 200) {
              uni.setStorageSync("TOKEN", res.token);
              this.toHome();
            } else {
              uni.showToast({
                title: res.msg || '服务器错误',
                icon: "none",
                mask: true,
              });
            }
          });
        },
      });
    },
    // 跳转首页
    toHome() {
      uni.showToast({
        title: "登录成功",
        icon: "success",
        mask: true,
        success: () => {
          setTimeout(() => {
            uni.switchTab({ url: "/pages/tabBar/homeIndex" });
          }, 1500);
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  height: 100vh;
  overflow: hidden;
  padding: 30rpx;
  background: linear-gradient(180deg, #87d5d6 0%, #157dfa00 30%);
  .info {
    .avatar {
      border: 4rpx solid #24de73;
      border-radius: 50%;
      overflow: hidden;
    }
  }
  .btn {
    margin-top: 100rpx;
    height: 96rpx;
    width: 100%;
    background-color: #24de73;
    border-radius: 60rpx;
    font-size: 32rpx;
    color: #fff;
    font-weight: 600;
    &:active {
      background-color: #25ca6a;
    }
  }
  .forget {
    font-size: 24rpx;
    color: #24de73;
  }
}
</style>
